<template>
  <div>
    <!--桌台数据-->
    <div class="table_data">
      <!--桌台数据-->
      <el-collapse v-model="activeNames">
        <el-collapse-item title="全店桌台数据(点击折叠/展开)" name="1">
          <el-row>
            <!--全部-->
            <el-col :md="6" class="data_square">
              <div class="showinfo">
                <i>{{DeskInfo.freeDesk+DeskInfo.lockDesk+DeskInfo.repastDesk}}</i>
                <p>全部</p>
              </div>
            </el-col>
            <!--空闲-->
            <el-col :md="6" class="data_square">
              <div class="showinfo">
                <i>{{DeskInfo.freeDesk}}</i>
                <p>空闲</p>
              </div>
            </el-col>
            <!--就餐-->
            <el-col :md="6" class="data_square">
              <div class="showinfo">
                <i>{{DeskInfo.repastDesk}}</i>
                <p>就餐</p>
              </div>
            </el-col>
            <!--锁定-->
            <el-col :md="6" class="data_square">
              <div class="showinfo">
                <i>{{DeskInfo.lockDesk}}</i>
                <p>锁定</p>
              </div>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!--桌台模式-->
    <div class="table_manage_model">
      <!--标题-->
      <div class="tm_title">
        <span style="float: left">桌台模式</span>
        <!--<button style="float: right">
          <span>全屏模式</span>
          <img width="13" height="13"
               src=""
               alt="">
        </button>-->
        <i class="full_screen"></i>
      </div>
      <!--内容-->
      <div>
        <!--筛选**************************************-->
        <div class="filter_box">
          <div class="filter_row">
            <span class="filter_title">所在位置：</span>
            <span :class="{active:query.deskRoomId==''}" class="filter_all" @click="setSearchRoom('')">全部</span>
            <span :class="{active:item.value==query.deskRoomId}" v-for="item in deskRoomOptions"
                  @click="setSearchRoom(item.value)">{{item.name}}</span>
          </div>
          <div class="filter_row">
            <span class="filter_title">桌台类型：</span>
            <span :class="{active:query.deskTypeId==''}" class="filter_all" @click="setSearchType('')">全部</span>
            <span :class="{active:item.value==query.deskTypeId}" v-for="item in deskTypeOptions"
                  @click="setSearchType(item.value)">{{item.name}}</span>
          </div>
          <div class="filter_row">
            <span class="filter_title">餐桌状态：</span>
            <span :class="{active:query.status==''}" class="filter_all" @click="query.status=''">全部</span>
            <span :class="{active:item.id==query.status}" @click="query.status=item.id" v-for="item in tableStatus ">{{item.status}}</span>
          </div>
        </div>
        <!--筛选************************************-->
      </div>
      <div class="square_box">
        <!--桌台方块区-->
        <template v-for="table in tableData">
          <el-col :xs="12" :sm="8" :md="6" :lg="4" :xl="4" class="desk_square">
            <div class="desk_square_content" @click="deskTypeChangeDialogOpen(table)">
              <div class="table_num" :class="{table_repast:table.status==3,table_lock:table.status==2}">
                <p style="text-align: center">
                  <span>
                    <img v-if="table.status==3" width="20" height="20" :src="repastIcon">
                    <img v-if="table.status==2" width="20" height="20" :src="lockIcon">

                    {{table.deskName}}</span>
                  <span>桌</span>
                </p>
              </div>
              <div class="table_type">
                <span style="position: absolute;top: 50%;font-size: 14px;color: #666666;margin-top: -10px;left: 15px">{{table.deskRoomName}}-{{table.deskTypeName}}</span>
                <span
                  style="position: absolute;top: 50%;font-size: 14px;color: #666666;margin-top: -10px;right: 15px">{{table.minAmount}}-{{table.maxAmount}}人</span>
              </div>
            </div>
          </el-col>
        </template>
        <div v-show="tableData.length==0" style="text-align: center;margin-top: 20px;color:#ff9016 ">查无桌台</div>
      </div>
    </div>

    <!--模态框-->

    <el-dialog
      :title="nowDeskInfo.deskName + '桌'"
      :visible.sync="deskTypeChangeDialog"
      width="400px"
      :before-close="deskTypeChangeClose">
      <p>所在位置：{{nowDeskInfo.deskRoomName}}</p>
      <p>桌台类型：{{nowDeskInfo.deskTypeName}}</p>
      <p>当前状态：{{statusTranslate(nowDeskInfo.status)}}</p>
      <p>顾客人数：
        <el-input-number size="mini" :precision="0" :step="1" v-model="nowDeskInfo.cusNumber"
                         :min="nowDeskInfo.minAmount" :max="nowDeskInfo.maxAmount"
                         @change="changeCusNumber(nowDeskInfo)"></el-input-number>
      </p>
      <div v-if="nowDeskInfo.status==3">
        <p>开桌时间：{{deskOrder.createTime}}</p>
        <p>已点菜：{{deskOrder.goodsAmount}}个/已赠菜 {{deskOrder.giftAmount}}个
          <el-button
            size="mini"
            type="danger"
            @click="openOrderingProgress()">查看点餐进度
          </el-button>
        </p>
        <p>售价：¥{{deskOrder.sellMoney}}</p>
      </div>
      <br>
      <div v-if="nowDeskInfo.status==1">
        <button class="deskBooking" @click="diningTable(nowDeskInfo)">开 桌</button>
        <!--<button class="deskBooking" @click="lockTable(nowDeskInfo)" style="margin-top: 10px;background-color:#ff6670; ">-->
        <!--锁 定-->
        <!--</button>-->
      </div>
      <!--就餐-->
      <div v-if="nowDeskInfo.status==3">
        <button class="deskOperation" style="background-color:#F56C6C" @click="bookItemDetailsOpen(nowDeskInfo)">点 菜
        </button>
        <button class="deskOperation" style="background-color:#e6a23c" @click="deskChange(nowDeskInfo)">换 桌</button>
        <button class="deskOperation" style="background-color:#6FC544" disabled="disabled">打 单</button>
        <button class="deskOperation" style="background-color:#409eff" disabled="disabled">结 账</button>
      </div>
      <!--锁定-->
      <div v-if="nowDeskInfo.status==2">
        <button class="deskOperation" style="background-color:#F56C6C" @click="bookItemDetailsOpen(nowDeskInfo)">点 菜
        </button>
        <button class="deskOperation" style="background-color:#e6a23c" @click="deskChange(nowDeskInfo)">换 桌</button>
        <button class="deskOperation" style="background-color:#85ce61" @click="unlockTable(nowDeskInfo)">解除锁定</button>
      </div>

      <!--<span slot="footer" class="dialog-footer"></span>-->
    </el-dialog>

    <!--换桌-->
    <el-dialog
      title="调换桌位"
      :visible.sync="deskChangeDialog"
      width="400px"
      :before-close="deskChangeClose">

      <el-form label-position="right" label-width="80px">
        <el-form-item label="位置">
          <el-select v-model="deskChangeTarget.room" placeholder="请选择位置">
            <el-option
              v-for="item in deskRoomOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="桌型">
          <el-select v-model="deskChangeTarget.type" placeholder="请选择桌型">
            <el-option
              v-for="item in deskTypeOptions"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="餐桌">
          <el-select v-model="deskChangeTarget.desk" placeholder="请选择餐桌">
            <el-option
              v-for="item in freeDesk"
              :key="item.value"
              :label="item.name"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <div>
          <button class="deskOperation" @click="confirmChangeDesk">确认换桌</button>
          <button class="deskOperation" style="background-color: gray" @click="deskChangeClose">取 消</button>
        </div>
      </el-form>


    </el-dialog>
    <!--分页-->

    <div>
      <pagination
        :total-elements="totalElements"
        :change-callback="getDeskList"
        ref="page"></pagination>
    </div>


    <!--查看工作进度-->
    <el-dialog
      title="点餐进度"
      :visible.sync="orderingProgressDialog"
      style="margin-top: -70px"
    >
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="已点菜" name="goods">
          <el-table
            :data="goodsTableData"
            style="width: 100%;"
            @selection-change="handleSelectionChange">
            <el-table-column
              prop="name"
              label="菜品名称">
            </el-table-column>
            <el-table-column
              prop="amount"
              label="数量">
            </el-table-column>
            <el-table-column
              prop="specifications"
              label="规格/口味">
            </el-table-column>
            <el-table-column
              prop="doWay"
              label="做法/称量">
            </el-table-column>
            <el-table-column
              prop="unitPrice"
              label="售价(元)">
            </el-table-column>
            <el-table-column
              prop="tolPrice"
              label="小计(元)">
            </el-table-column>
            <el-table-column
              prop="giftDeskName"
              label="餐桌编号">
            </el-table-column>
            <el-table-column
              label="操作"
              width="270">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="giftOrCancle(scope.row.id,2)">赠菜
                </el-button>
                <el-button
                  size="mini"
                  type="primary"
                  @click="giftOrCancle(scope.row.id,3)">退菜
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total-elements="goodsTotalElements"
            :change-callback="scheduleList"
            ref="page"
            v-if="hackReset"></pagination>
        </el-tab-pane>
        <el-tab-pane label="已赠菜" name="gifts">
          <el-table
            :data="giftTableData"
            style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column
              prop="name"
              label="菜品名称">
            </el-table-column>
            <el-table-column
              prop="amount"
              label="数量">
            </el-table-column>
            <el-table-column
              prop="specifications"
              label="规格/口味">
            </el-table-column>
            <el-table-column
              prop="doWay"
              label="做法/称量">
            </el-table-column>
            <el-table-column
              prop="unitPrice"
              label="售价(元)">
            </el-table-column>
            <el-table-column
              prop="giftDeskName"
              label="餐桌编号">
            </el-table-column>
            <el-table-column
              label="操作"
              width="270">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="primary"
                  @click="giftOrCancle(scope.row.id,3)">退菜
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            :total-elements="giftTotalElements"
            :change-callback="scheduleList"
            ref="page"
            v-if="hackReset"></pagination>
        </el-tab-pane>
      </el-tabs>
    </el-dialog>


    <!--点菜模态框-->
    <el-dialog
      title="点菜详情"
      :visible.sync="bookItemDetails"
      width="1200px"
      show-close
      :before-close="bookItemDetailsClose"
      style="margin-top: -50px">
      <!--功能区-->
      <div class="bk_box">
        <el-row>
          <el-col :xs="24" :sm="24" :lg="18" :xl="18">
            <div class="bk_left">
              <div class="bk_left_top">
                <div class="bk_key_search">
                  <el-button round size="small" class="key_btn">
                    全部
                  </el-button>
                  <el-button round size="small" v-for="(item,index) in keyword" :key="index" class="key_btn">
                    {{item}}
                  </el-button>
                </div>
                <div class="bk_key_search_bar">
                  <el-input placeholder="关键词">
                    <el-button slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                </div>
              </div>
              <div class="bk_left_middle">
                <el-row :gutter="10" style="border-radius: 4px;">
                  <el-col :xs="6" :sm="6" :md="4" :lg="4" :xl="4" class="bk_square">
                    <div class="bk_square_item">
                      <p>泡面</p>
                      <p><i>￥5/份</i></p>
                      <p>奢侈</p>
                      <p class="item_serial">No:001</p>
                    </div>
                  </el-col>

                  <el-col :xs="6" :sm="6" :md="4" :lg="4" :xl="4" class="bk_square">
                    <div class="bk_square_item">
                      <p>泡面</p>
                      <p>￥5/份</p>
                      <p>奢侈</p>
                    </div>
                  </el-col>

                  <el-col :xs="6" :sm="6" :md="4" :lg="4" :xl="4" class="bk_square">
                    <div class="bk_square_item">
                      <p>泡面</p>
                      <p>￥5/份</p>
                      <p>奢侈</p>
                    </div>
                  </el-col>

                  <el-col :xs="6" :sm="6" :md="4" :lg="4" :xl="4" class="bk_square">
                    <div class="bk_square_item">
                      <p>泡面</p>
                      <p>￥5/份</p>
                      <p>奢侈</p>
                    </div>
                  </el-col>

                  <el-col :xs="6" :sm="6" :md="4" :lg="4" :xl="4" class="bk_square">
                    <div class="bk_square_item">
                      <p>泡面</p>
                      <p>￥5/份</p>
                      <p>奢侈</p>
                    </div>
                  </el-col>

                  <el-col :xs="6" :sm="6" :md="4" :lg="4" :xl="4" class="bk_square">
                    <div class="bk_square_item">
                      <p>泡面</p>
                      <p>￥5/份</p>
                      <p>奢侈</p>
                    </div>
                  </el-col>

                  <el-col :xs="6" :sm="6" :md="4" :lg="4" :xl="4" class="bk_square">
                    <div class="bk_square_item">
                      <p>泡面</p>
                      <p>￥5/份</p>
                      <p>奢侈</p>
                    </div>
                  </el-col>

                </el-row>
              </div>
              <div class="bk_left_bottom">
                <pagination
                  :total-elements="giftTotalElements"
                  :change-callback="scheduleList"
                  ref="page"
                  v-if="hackReset"></pagination>
              </div>
            </div>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="6" :xl="6">
            <div class="bk_right">
              <div class="bkr_title_bar">
                <div class="bkr_title headerbar">已经点菜</div>
                <div class="bkr_clear headerbar">清空</div>
              </div>
              <div class="line"></div>
              <div class="bkr_cartlist">
                <div>
                  <div class="cart_flex">菜品</div>
                  <div class="cart_flex">数量</div>
                  <div class="cart_flex">总价</div>
                </div>
              </div>
              <div class="cartlist">
                <!--循环的列表-->
                <div class="menu_table">
                  <div style="padding: 8px 10px 5px">
                    <div class="cart_name">辣子鸡</div>
                    <div class="cart_num">
                      <el-input-number size="mini" style="width: 90px"></el-input-number>
                    </div>
                    <div class="cart_price">￥12.00</div>

                    <div class="tips">
                      备注：辣味
                    </div>
                  </div>
                </div>
                <!--循环的列表-->
              </div>
              <div class="bkr_cartlist">
                <div class="cart_flex cartTotal">总计</div>
                <div class="cart_flex cartTotal">7</div>
                <div class="cart_flex cartTotal" style="color: red">￥22</div>
              </div>

              <div class="bkr_btn">
                <el-button type="primary" style="width: 120px;">下单</el-button>
              </div>

            </div>
          </el-col>
        </el-row>

      </div>

    </el-dialog>


  </div>
</template>
<script>
  import {
    deskUpdate,
    deskRoomSelectItem,
    deskTypeSelectItem,
    deskList,
    freeDesks,
    changeLockDesk,
    repastDeskChange,
    showDeskInfo,
  } from '../api/workbench'
  import {workBenchOrderDetail, scheduleListS,giftOrCancle
  } from "../../data/api/order";
  import pagination from '@/components/pagination/index'


  import Vue from 'vue'

  export default {
    name: 'desk',
    data() {
      return {
        tableData: [], // 表格数据
        totalElements: 0, // 数据条数
        multipleSelectionMode: false,//多选删除模式
        multipleSelection: [], // 选中数据-多选
        loading: true, // loading效果
        createdDialog: false, // 餐桌模态框
        formLabelWidth: '120px',
        deskRoomOptions: [],
        deskTypeOptions: [],
        query: {
          deskRoomId: '',
          deskTypeId: '',
          status: ''
        },
        specListForm: {
          list: [],
        },
        currentRow: {
          id: '',
          name: '',
          deskTypeId: '',
        },
        headers: {
          accessToken: sessionStorage.token
        }, // 请求头部

        activeNames: ['1'],//默认展开模式 no
        tableStatus: [
          {id: 1, status: '空闲'},
          {id: 2, status: '锁定'},
          {id: 3, status: '就餐'}
        ],//餐桌状态
        DeskInfo: {
          freeDesk: 0,
          lockDesk: 0,
          repastDesk: 0,
        }
        ,//桌台信息
        repastIcon: '',
        lockIcon: '',
        //桌台使用状态模态框
        deskTypeChangeDialog: false,
        nowDeskInfo: {},//当前查看的桌台信息
        deskChangeDialog: false,//换桌子
        deskChangeTarget: {
          room: '',
          type: '',
          desk: ''
        },
        freeDesk: {},//空闲桌数据
        deskTypeListdata: {},//桌型数据
        //就餐显示餐桌订单信息
        deskOrder: {
          createTime: '2019-04-03：:11:01', //开桌时间
          goodsAmount: '2',//已点菜
          giftAmount: '8',//赠菜
          sellMoney: '111',//售价
          orderId: '',
        },
        orderingProgressDialog: false,
        goodsTableData: [], //点餐进度点菜表格数据
        goodsTotalElements: 0,//点餐进度点菜分页
        giftTableData: [], //点餐进度赠菜表格数据
        giftTotalElements: 0,//点餐进度赠菜分页
        activeName: 'goods',
        tableDataStatus: 1,//已点菜和赠菜
        bookItemDetails: false,//点菜详情模态框
        hackReset: true, //模态框中多个翻页用，每次更换则销毁一次并重新打开


        keyword: ['招牌', '招牌', '招牌', '招牌', '招牌', '招牌', '招牌', '招牌', '招牌', '招牌', '招牌', '招牌', '招牌', '招牌']
      }
    },
    components: {pagination},
    created() {
      this.getDeskList();
      this.getDeskRoomSelectItem();
      this.getDeskTypeSelectItem();
      // this.getDeskTypeList();
      this.getAllTableData();//获取桌台数据汇总信息

    },
    watch: {
      /*
     * 监听多选模式是否取消，如果取消，清除所有被选中的deskId
     * */
      // multipleSelectionMode: function (newValue) {
      //   if (newValue == false) {
      //     this.multipleSelection = [];
      //     this.refresh();
      //   }
      //   //console.log(this.multipleSelection)
      // },

      /*
    * 监听餐台状态选择是否变化，更换关键词
    * */
      query: {
        deep: true,
        handler: function () {
          console.log('new value');
          this.getDeskList();
        }
      },
      deskChangeTarget: {
        deep: true,
        handler: function () {
          this.getFreeDesk(this.deskChangeTarget.room, this.deskChangeTarget.type);
          // this.getDeskTypeList(); //没有返回位置ID 作废
        }
      }
    },
    methods: {
      /*
      * 获取所有数据
      * */
      getAllTableData: function () {
        showDeskInfo().then(response => {
          let data = response.obj;
          // this.DeskInfo=data;
          this.DeskInfo.freeDesk = data.freeDesk;
          this.DeskInfo.lockDesk = data.lockDesk;
          this.DeskInfo.repastDesk = data.repastDesk;

        })
      },
      /*
      * 获取桌型列表
      * */
      // getDeskTypeList: function () {
      //   deskTypeList().then(response => {
      //     let data = response.obj;
      //     console.log(data.content);
      //     this.deskTypeListdata = data.content
      //   })
      // },
      /*
     * 打开桌台信息模态框
     * */
      deskTypeChangeDialogOpen: function (table) {
        console.log(table);
        this.nowDeskInfo = table;
        //如果餐桌状态为就餐状态,获取餐桌对应的订单信息
        if (table.status == 3) {
          workBenchOrderDetail(table.deskId).then(response => {
            let data = response.obj;
            this.deskOrder.createTime = data.createTime;
            this.deskOrder.goodsAmount = data.goodsAmount;
            this.deskOrder.giftAmount = data.giftAmount;
            this.deskOrder.sellMoney = data.sellMoney;
            this.deskOrder.orderId = data.orderId;
          })
        }
        this.deskTypeChangeDialog = true;
        Vue.set(this.nowDeskInfo, 'storeId', sessionStorage.getItem('storeId'))
      },
      /*
      * 关闭桌台信息模态框
      * */
      deskTypeChangeClose: function () {
        this.deskTypeChangeDialog = false;
        this.nowDeskInfo = {};
      },

      statusTranslate: function (status) {
        let str = '';
        switch (status) {
          case 1:
            str = '空闲';
            break;
          case 2:
            str = '锁定';
            break;
          case 3:
            str = '就餐';
            break;
        }
        return str;
      },

      /*
      * 开桌
      * */
      diningTable: function (nowDeskInfo) {
        console.log(nowDeskInfo);
        nowDeskInfo.status = 2;//开桌code
        // 只需要四个信息
        let data = {
          id: nowDeskInfo.deskId,
          cusNumber: nowDeskInfo.cusNumber,
          status: nowDeskInfo.status,
          storeId: nowDeskInfo.storeId
        }
        deskUpdate(data).then(response => {
          this.getDeskList();
          this.getAllTableData();//获取桌台数据汇总信息
          this.$message({
            message: response.msg,
            type: 'success'
          })
          //切换栏目
          this.query.status = 2
        }).catch(() => {
          this.loading = false
          this.getDeskList();
        })
      },

      /*
      * 修改人数
      * */
      changeCusNumber: function (nowDeskInfo) {
        if (nowDeskInfo.status == 1) {
          // 获取简要信息
          let data = {
            id: nowDeskInfo.deskId,
            cusNumber: nowDeskInfo.cusNumber,
            status: 2,//状态必须发送
            storeId: nowDeskInfo.storeId
          };
          // 发送请求
          deskUpdate(data).then(response => {
            this.getDeskList();
            this.$message({
              message: response.msg,
              type: 'success'
            })
            //切换栏目
            this.query.status = 2
          }).catch(() => {
            this.loading = false
            this.getDeskList();
          })
        }
      },
      /*
      * 锁定
      * */
      lockTable: function (nowDeskInfo) {
        if (nowDeskInfo.status != 2) {
          // 获取简要信息
          let data = {
            id: nowDeskInfo.deskId,
            cusNumber: nowDeskInfo.cusNumber,
            status: 2,//状态必须发送
            storeId: nowDeskInfo.storeId
          };
          // 发送请求
          deskUpdate(data).then(response => {
            this.deskTypeChangeDialog = false;
            this.getDeskList();
            this.getAllTableData();//获取桌台数据汇总信息
            this.$message({
              message: response.msg,
              type: 'success'
            })
            //切换栏目
            this.query.status = 2
          }).catch(() => {
            this.loading = false;
            this.getDeskList();
          })
        }
      },
      /*
      *解锁
      * */
      unlockTable: function (nowDeskInfo) {
        console.log(nowDeskInfo)
        // 获取简要信息
        let data = {
          id: nowDeskInfo.deskId,
          cusNumber: 0,
          status: 1,//解锁
          storeId: nowDeskInfo.storeId
        };
        // 发送请求
        deskUpdate(data).then(response => {
          this.deskTypeChangeDialog = false;
          this.getDeskList();
          this.getAllTableData();//获取桌台数据汇总信息
          this.$message({
            message: response.msg,
            type: 'success'
          })
          //切换栏目
          this.query.status = 1
        }).catch(() => {
          this.loading = false;
          this.getDeskList();
        })
      },

      //*换桌操作
      deskChange: function (nowDeskInfo) {
        this.deskChangeDialog = true;
      },
      //换桌模态框关闭操作
      deskChangeClose: function () {
        this.deskChangeDialog = false
        this.deskChangeTarget = {
          room: '',
          type: '',
          desk: ''
        }
      },
      /*
      * 获取空闲餐桌
      * */
      getFreeDesk: function (rid, tid) {
        freeDesks(rid, tid).then(response => {
          let data = response.obj;
          // console.log('空闲桌' + data);
          // this.DeskInfo=data;
          this.freeDesk = data
        })
      },
      /*
      *确认换桌子
      * */
      confirmChangeDesk: function () {
        console.log('当前餐桌信息' + this.nowDeskInfo.status)
        let olddata = this.nowDeskInfo.deskId;
        let newdata = this.deskChangeTarget.desk;

        this.$confirm('确认换桌？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            if (2 == this.nowDeskInfo.status) {
              changeLockDesk(olddata, newdata).then(response => {
                this.$message({
                  message: response.msg,
                  type: 'success'
                })
                this.getDeskList();
                this.getAllTableData();//获取桌台数据汇总信息
                this.deskTypeChangeDialog = false
                this.deskChangeDialog = false;
                this.deskChangeTarget = {
                  room: '',
                  type: '',
                  desk: ''
                }
              }).catch(() => {
                this.getDeskList();
              })
            }
            if (3 == this.nowDeskInfo.status) {
              repastDeskChange(olddata, newdata).then(response => {
                this.$message({
                  message: response.msg,
                  type: 'success'
                })
                this.getDeskList();
                this.getAllTableData();//获取桌台数据汇总信息
                this.deskTypeChangeDialog = false
                this.deskChangeDialog = false;
                this.deskChangeTarget = {
                  room: '',
                  type: '',
                  desk: ''
                }
              }).catch(() => {
                this.getDeskList();
              })
            }
          }
        ).catch(() => {

        })
      },


      //---------------------点餐--------------------------------
      scheduleList(number, pageSize) {
        this.loading = true
        scheduleListS(number, pageSize, this.deskOrder.orderId, this.tableDataStatus).then(response => {
          let data = response.obj;
          console.log(data)
          this.loading = false
          this.goodsTableData = data.content
          for (let i = 0; i < data.content.length; i++) {
            data.content[i].giftDeskName = this.nowDeskInfo.deskName
          }
          this.giftTableData = data.content
          this.giftTableData.deskName = this.nowDeskInfo.deskName
          this.goodsTotalElements = data.totalElements;
          this.giftTotalElements = data.totalElements;

        })
        this.$refs.page.pageReset();
      },

      //赠菜或退菜
      giftOrCancle(orderItemId,status) {
        this.$confirm('是否确认操作？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          giftOrCancle(orderItemId,status).then(response => {
            this.$message({
              message: response.msg,
              type: 'success',
              duration: 1000
            })
            this.$refs.page.search()
          }).catch(() => {
            this.loading = false
          })
        })
      },


      openOrderingProgress: function () {
        this.orderingProgressDialog = true
        this.tableDataStatus = 1
        this.scheduleList();
      },

      //选项卡切换
      handleClick(tab, event) {
        //用$nextTick 获取新的dom
        this.hackReset = false
        this.$nextTick(() => {
          this.hackReset = true //更换值，重新渲染
        })
        //更换标签
        if (tab.name == 'goods') {
          this.tableDataStatus = 1
          this.scheduleList();
        } else {
          this.tableDataStatus = 2
          this.scheduleList();
        }
      },

      //********************************************************
      handleSelectionChange(val) {
        this.multipleSelection = val
      },
      handleDelete(row) {
        this.multipleSelection.push(row);
        this.deleteDesks()
      },
      /*
      * 获取餐桌列表
      * */
      getDeskList: function (number, pageSize) {
        this.loading = true
        deskList(number, pageSize, this.query).then(response => {
          let data = response.obj.rows
          this.tableData = data
          this.totalElements = response.obj.total
          this.loading = false
          console.log(this.tableData)
        }).catch(() => {
          this.loading = false
        })
      },
      // 获取餐桌位置
      getDeskRoomSelectItem: function () {
        deskRoomSelectItem().then(response => {
          this.deskRoomOptions = response.obj
          console.log(this.deskRoomOptions);
        })
      },
      // 获取餐桌类型
      getDeskTypeSelectItem: function () {
        deskTypeSelectItem().then(response => {
          // console.log(response.obj)
          this.deskTypeOptions = response.obj
          console.log(this.deskTypeOptions);
        })
      },
      //点餐详情模态框 关闭
      bookItemDetailsOpen: function (data) {
        this.bookItemDetails = true;
        console.log(data)
      },
      bookItemDetailsClose: function () {
        this.bookItemDetails = false
      },

      // 搜索参数
      setSearchRoom: function (roomid) {
        this.query.deskRoomId = roomid;
        this.getDeskList();
      },
      setSearchType: function (typeid) {
        this.query.deskTypeId = typeid;
        this.getDeskList();
      },
      setSearchStatus: function (sid) {
        this.query.status = sid;
      },

      /*
     * 刷新
     * */
      refresh() {
        this.$refs.page.refresh()
      },
      //重置
      reset() {
        this.query = {
          deskTypeId: '',
          deskRoomId: '',
        }
        this.$refs.page.search()
      },
      /*
      * 搜索
      * */
      search() {
        this.$refs.page.search()
      },
    }
  }
</script>

<style scoped>
  @import "../css/workbench.css";


  .logo-uploader {
    display: inline-block;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .logo-uploader:hover {
    border-color: #409EFF;
  }

  .logo-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .logo {
    width: 178px;
    height: 178px;
    display: block;
  }


</style>
